<template>
	<div class="tools-menu">
		<!-- 关闭所有 -->
		<el-button class="tools-item" link @Click="closeAll" v-if="tools.includes('Close')">
			<el-icon>
				<Close />
			</el-icon>
			关闭所有
		</el-button>
		<!-- 窗口比例 -->
		<el-dropdown :teleported="false" class="tools-item" @command="handleVedioRadio" v-if="tools.includes('ScaleToOriginal')">
			<el-button link>
				<el-icon>
					<ScaleToOriginal />
				</el-icon>
				窗口比例
				<span class="snum">
					{{ radio ===  WindowRadio.RADIO_FULL ? '填充' : radio }}
				</span>
			</el-button>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item :command="WindowRadio.RADIO_FULL">填充</el-dropdown-item>
					<el-dropdown-item :command="WindowRadio.RADIO_43">4:3</el-dropdown-item>
					<el-dropdown-item :command="WindowRadio.RADIO_169">16:9</el-dropdown-item>
					<el-dropdown-item :command="WindowRadio.RADIO_1610">16:10</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<!-- 分屏设置 -->
		<el-dropdown :teleported="false" @command="handleSplitScreen" class="tools-item" v-if="tools.includes('SetScreen')">
			<el-button link>
				<el-icon>
					<Files />
				</el-icon>
				分屏设置<span class="snum">{{ _windows }}</span>
			</el-button>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item :command="SplitScreen.ONE">1分屏</el-dropdown-item>
					<el-dropdown-item :command="SplitScreen.FOUR">4分屏</el-dropdown-item>
					<el-dropdown-item :command="SplitScreen.NINE">9分屏</el-dropdown-item>
					<el-dropdown-item :command="SplitScreen.SIXTEEN">16分屏</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		<!-- 全屏 -->
		<el-button class="tools-item" link @click="handleFullScreeng()" v-if="tools.includes('FullScreen')">
			<el-icon>
				<FullScreen v-if="!isScreen" />
				<Crop v-else></Crop>
			</el-icon>
			<span>{{ isScreen ? '退出全屏' : '全屏'}}</span>
		</el-button>
	</div>
</template>
<script setup lang="ts">
import { inject, ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Files, ScaleToOriginal, FullScreen, Close, Crop } from '@element-plus/icons-vue'
import { WindowRadio, SplitScreen } from '../enum.ts'

// 根节点注入的数据
const playersInstance: any = inject('playersInstance')
const tools = inject('tools') as any[]
const toolsColor = inject('toolsColor')
const windows = inject('windows')
const maxWindows = inject('maxWindows') as number

// 组件内部定义的数据
const _windows = ref(windows)
const radio = ref(WindowRadio.RADIO_169)
const emits = defineEmits(['setWindows', 'clearAll', 'setRadio'])
const isScreen = ref(false)
// 全屏
const handleFullScreeng = () => {
	if(!isScreen.value){
		playersInstance?.value.requestFullscreen()
		isScreen.value = true
	}else{
		document.exitFullscreen()
		isScreen.value = false
	}
}
// 分屏设置
const handleSplitScreen = async (command: number,emit: boolean = true) => {
	if (command > maxWindows) {
		return ElMessage.warning(`不能超过最大分屏设置限制：${maxWindows}`)
	}
	_windows.value = command
	if(emit){
		emits('setWindows', command)
	}
}
//关闭所有
const closeAll = () => {
	emits('clearAll', [])
}

// 窗口比例
const handleVedioRadio = (command) => {
	radio.value = command
	emits('setRadio',command)
}
// 监听全屏事件
const fullscreenchange = () => {
	if (document.fullscreenElement) {
		// 全屏状态
		isScreen.value = true
	} else {
		// 退出全屏状态
		isScreen.value = false
	}
}
defineExpose({
	setScreen: handleSplitScreen
})
onMounted(() => {
	document.addEventListener('fullscreenchange', fullscreenchange)
})
onBeforeUnmount(() => {
	document.removeEventListener('fullscreenchange', fullscreenchange)
})
</script>
<style lang="scss" scoped>
.tools-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	.tools-item {
		color: v-bind(toolsColor);
		padding: 5px;
		cursor: pointer;
		.el-button.is-link {
			color: v-bind(toolsColor);
		}
		.snum {
			display: inline-block;
			font-size: 12px;
			color: rgb(96, 98, 102);
			background-color: rgb(236, 241, 255);
			border-radius: 8px;
			width: auto;
			text-align: center;
			min-width: 16px;
			padding-left: 2px;
			padding-right: 2px;
			height: 16px;
			line-height: 16px;
		}
	}
}
</style>
